<!-- 编辑成员 -->
<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
    <el-form :model="form" ref="formRef" :rules="rules">
      <el-form-item label="检察人员身份" prop="jsbm">
        <new-tree-select
          key="jcrysf"
          style="width: 100%"
          :data="jsList"
          :defaultProps="defaultProps"
          node-key="dm"
          ref="treeselected"
          v-model="form.jsbm"
          :clearable="false"
          @change="jsbmChange"
        ></new-tree-select>
      </el-form-item>
      <el-form-item label="人员名称" prop="rybm">
        <new-tree-select
          ket="rylist"
          style="width: 100%"
          :data="ryList"
          :defaultProps="defaultProps"
          node-key="dm"
          ref="treeselected"
          v-model="form.rybm"
          :clearable="false"
          @change="rybmChange"
        ></new-tree-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="loading" @click="saveData"
        >保存</el-button
      >
      <el-button @click="closeDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import tdryService from '@/api/tdry.js'
import sjzdService from '@/api/sjzd.js'
import zzjgService from '@/api/zzjg'

import { ZZZT } from './enums'

import newTreeSelect from '../../components/systemTreeSelect.vue'

export default {
  components: {
    newTreeSelect
  },
  props: {
    tdbh: String
  },
  data () {
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'mc'
      },
      // 表单信息
      form: {
        jsbm: ''
      },
      // 角色下拉列表
      jsList: [],
      // 人员下拉列表
      ryList: [],
      rules: {
        jsbm: [{ required: true, message: '请选择角色' }],
        rybm: [{ required: true, message: '请选择人员' }]
      }
    }
  },
  methods: {
    /** 打开弹窗 */
    openDialog (data) {
      let title = '新增团队成员'
      if (data) {
        title = '编辑团队成员'
        this.form = { ...data }
      }
      this.title = title
      this.getJsList()
      this.dialogVisible = true
    },

    /** 获取角色下拉列表 */
    getJsList () {
      sjzdService
        .querySjzd({ lbbm: '9979' })
        .then(res => {
          // 禁用父节点不能点击
          res = res.map(item => {
            return {
              ...item,
              disabled: !item.fdm
            }
          })
          this.jsList = this.$getTreeData(res, 'dm', 'fdm')
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /** 选择的角色编码改变 */
    jsbmChange (dm, data) {
      this.form.jsmc = data.mc
      this.resetRy()
      this.getRyList(data.dm)
    },

    /** 获取人员下拉列表 */
    getRyList (dm) {
      const { dwbm } = this.$store.state.personInfo
      zzjgService
        .queryRylbByDwbm({
          dwbm
        })
        .then(res => {
          const children = res
            .filter(item => !item.sfbm || item.sfbm === dm)
            .map(item => {
              return {
                ...item,
                disabled: !item.sfbm
              }
            })
          this.ryList = this.$getTreeData(children, 'dm', 'fdm')
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /** 选择的人员编码改变 */
    rybmChange (dm, data) {
      this.form.rymc = data.mc
      this.form.lxdh = data.lxdh
      this.form.ryztdm = data.zzzt
      this.form.ryztmc = ZZZT[data.zzzt]
    },

    /** 重置当前人员数据 */
    resetRy () {
      this.form.rybm = ''
      this.form.rymc = ''
      this.form.lxdh = ''
      this.form.ryztdm = ''
      this.form.ryztmc = ''
      this.ryList = []
    },

    /** 保存 */
    saveData () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.saveTdry()
        }
      })
    },
    saveTdry () {
      const { dwbm, dwmc } = this.$store.state.personInfo
      const params = {
        ...this.form,
        dwbm,
        dwmc,
        tdbh: this.tdbh
      }
      this.loading = true
      tdryService
        .saveTdry(params)
        .then(res => {
          this.closeDialog()
          this.$emit('refresh', this.tdbh)
          this.$message({ type: 'success', message: '保存成功' })
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
        .finally(() => {
          this.loading = false
        })
    },

    /** 关闭弹窗 */
    closeDialog () {
      this.dialogVisible = false
      this.form = {}
    }
  }
}
</script>
